<template>
  <div class="assess-result">
    <div class="head-info">
      <div class="cycle">执行周期: {{ assessmentCycle }}</div>
      <div class="time">执行时间: {{ assessmentTime || '——'}}</div>
      <div class="export">
        <el-button
          icon="el-icon-folder-remove"
          type="primary"
          @click="handleExport()"
        >
          导出
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-container table-fullscreen">
      <el-table
        ref="table"
        v-loading="MX_listLoading"
        :data="MX_list"
        border
        highlight-current-row
        :row-key="$_getRowKey"
        style="width: 100%;text-align:center"
        :header-cell-style="MX_headerCellStyle"
      >
        <template slot="empty">
          <p>{{ $store.getters.dataText }}</p>
        </template>
        <el-table-column
          fixed="left"
          type="index"
          label="序号"
          width="70"
          align="center"
          :index="$_tableIndex"
        />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :formatter="item.formatter"
          align="center"
        />
      </el-table>
      <!-- 分页器 -->
      <dt-pagination
        v-show="MX_total > 0"
        :total="MX_total"
        :page.sync="MX_pageNav.pageNo"
        :limit.sync="MX_pageNav.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import assessApi from '@/api/investment/assess'
import commonList from "@/utils/mixins/investment/commonList"

export default {
  name: 'assessResult',
  mixins: [commonList],
  props: {
    assessmentId: {
      type: String | Number
    },
    assessmentCycle: {
      type: String
    },
    assessmentTime: {
      type: String
    },
  },  
  data() {
    return {
      // 列信息
      columns: [
        { prop: 'ranking', label: `排名`, minWidth: '100px' },
        { prop: 'name', label: `专班名称/乡镇街道/区直部门`, minWidth: '300px' },
        { prop: 'score', label: `得分`, minWidth: '100px' }
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$_getList(assessApi.getScoreRankingList,{
        assessmentId: this.assessmentId,
        ...this.MX_pageNav
      })
    },
    handleExport() {
      this.$_handleDownload(assessApi.exportScoreRankingList, '考核结果', {assessmentId: this.assessmentId});
    }
  }
}
</script>

<style>
.dialog-wrap .el-dialog__body {
  padding: 0 24px!important;
}
</style>
<style lang="scss" scoped>
.assess-result {
  .head-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    .cycle,
    .time {
      width: 250px;
      font-weight: 600;
    }
    .export{
      display: flex;
      justify-content: flex-end;
      flex: 1;

    }
  }
}
</style>
